<template>
  <router-link tag="div" to="/firstpage" class="cover">
    <transition name="fade">
      <div class="imgBox" v-if="flag">
        <img src="../assets/diqiu.jpeg" alt="" />
      </div>
    </transition>

    <div class="text">
      <transition name="slide-fade1" @before-enter="beforeEnter" @enter="enter">
        <h3 v-if="flag">
          <span style="margin-right: 15px; float: left"
            ><br /><br />观<br />天<br />下<br />事</span
          >
          <span style="float: left; color: #ff9696"
            ><br />为<br />爱<br />加<br />油</span
          >
        </h3>
      </transition>
    </div>

    <div class="background">
      <ul>
        <li><img src="../assets/w.jpeg" alt="" /></li>
        <li><img src="../assets/q.jpg" alt="" /></li>
        <li><img src="../assets/r.jpg" alt="" /></li>
        <li><img src="../assets/w.jpeg" alt="" /></li>
        <li><img src="../assets/q.jpg" alt="" /></li>
        <li><img src="../assets/r.jpg" alt="" /></li>
      </ul>
    </div>
  </router-link>
</template>

<script>
export default {
  name: "Cover",
  data() {
    return {
      flag: false,
    };
  },
  mounted() {
    this.flag = true;
  },
  methods: {
    beforeEnter(el) {
      el.style.opactiy = "0";
      el.style.transform = "translateX(-400px)";
    },
    enter(el) {
      this.flag = true;
      // 执行这个后，浏览器刷新了动画
      el.offsetWidth;
      // console.log("进场");
      el.style.transition = "all 4s ease";
      el.style.opactiy = "1";
      el.style.transform = "translateX(80px)";
    },
  },
};
</script>

<style scoped lang="less">
.cover {
  height: 100vh;
  /*background: url("../assets/diqiu.png") no-repeat;*/
  /*background-size: cover;*/
  background-color: #f6f6f6;
  overflow: hidden;
}

ul {
  width: 900px;
  height: 100%;
  overflow: hidden;
}

ul > li > img {
  float: left;
  height: 100px;
  width: 150px;
  margin-top: 20px;
}

.background > ul {
  animation-name: my;
  /* 2.设置动画的总耗时 */
  animation-duration: 10s;
  /*3.设置动画的播放次数，默认为1次  可以指定具体的数值，也可以指定infinite(无限次)*/
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.imgBox img {
  height: 40%;
  width: 100%;
  overflow: hidden;
  -webkit-animation: move 30s linear infinite;
  transform-origin: center;
  border-radius: 50%;
}

@keyframes my {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-400px);
  }
}

/*声明动画*/
@keyframes move {
  0% {
    left: 0;
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.text {
  color: #85c4ff;
  margin: 0 0 0 200px;
  font-family: 华文行楷;
  font-size: 20px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 15s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
